import React, { FC } from 'react';
import useGetComponentInfo from '../../../hooks/useGetComponentinfo.ts';
import { getComponentConfByType,ComponentPropsType } from '../../../components/QuestionComponents/index.ts';
import { changeComponentProps } from '../../../store/componentsReducer/index.ts';
import { useDispatch } from 'react-redux';

const NoProp: FC = ()=>{
    return <div style={{ textAlign:'center' }}>未选中组件</div>
}
// 这是两个性质不同的输入框共同有的
const ComponentProp:FC = ()=>{
    const dispatch = useDispatch()
    // 当前选中的组件信息
    const { selectedComponent } = useGetComponentInfo()

    if(selectedComponent == null) return <NoProp />
    const { type,props,isLocked,isHidden } = selectedComponent
    const componentConf = getComponentConfByType(type)
    // console.log('componentConf',componentConf)

    if(componentConf == null) return <NoProp />
    const changeProps = (newProps: ComponentPropsType)=>{
        // console.log('selectedComponent',selectedComponent);
        // newProps 就是 selectedComponent里面的 props
        if(selectedComponent == null) return
        const { fe_id } = selectedComponent
        // console.log('newProps',fe_id,newProps);
        // 去改变中间canvas画布
        dispatch(changeComponentProps({fe_id,newProps}))
    }
    const { PropComponent } = componentConf
    // 这里的 onChange要传给 PropComponent文件，来统一修改--->就是 '../../../components/QuestionComponents/QuestionTitle/PropComponent'
    return <PropComponent {...props} onChange={changeProps} disabled={isLocked||isHidden} />
} 

export default ComponentProp